<script type="text/html" data-help-name="ui-dropdown">
    <p>
        Adds a dropdown to your dashboard that will emit values
        in Node-RED under `msg.payload` anytime it's value is changed.
    </p>
    <p>
        In the case where a single option is selected, returns the object detailing that selection.
        If "Allow multiple selections" is enabled, returns an array of objects detailing the selections.
    </p>
    <h3>Selecting Options via <code>msg.</code></h3>
    <p>
        You can dynamically make selections for this dropdown by passing in the respective <code>value</code> to <code>msg.payload</code>.
    </p>
    <p>
        To make a single selection, pass in the <code>value</code> of the option as <code>msg.payload</code>, e.g. <code>msg.payload = "option1"</code>.
    </p>
    <p>
        To make a multi-selection selection, you must first have "Allow Multiple" enabled on the node, you can then
        pass an Array of <code>value</code> of the respective options as <code>msg.payload</code>, e.g. <code>msg.payload = ["option1", "option2"]</code>.
    </p>
    <p>
        To clear any selection for a dropdown, pass an empty array <code>[]</code> as <code>msg.payload</code>.
    </p>
    <h3>Dynamic Properties (Inputs)</h3>
    <p>Any of the following can be appended to a <code>msg.</code> in order to override or set properties on this node at runtime.</p>
    <dl class="message-properties">
        <dt class="optional">options <span class="property-type">array</span></dt>
        <dd>
            Change the options available in the dropdown at runtime
            <ul>
                <li><code>Array&lt;string&gt;</code></li>
                <li><code>Array&lt;{value: String}&gt;</code></li>
                <li><code>Array&lt;{value: String, label: String}&gt;</code></li>
            </ul>
        </dd>
        <dt class="optional">class <span class="property-type">string</span></dt>
        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
    </dl>
</script>